<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/about/message">message</router-link>
    <div></div>
    <router-link to="/about/hobby">hobby</router-link>
    <router-view />
  </div>
  <div class="container">
    <h2>编程式导航</h2>
    <button @click="this.$router.push('/home')">ToHome</button>
    <button @click="handleToHobby">ToHobby</button>
    <h2>queryString:{{queryString}}</h2>
  </div>
</template>

<script>
import {useRouter, useRoute} from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const handleToHobby = () => {router.push('/about/hobby')}
    const route = useRoute()
    const queryString = route.query
    return {
      handleToHobby,
      queryString
    };
  },
};
</script>